<template>
  <!--排行榜设计-->
  <div class="ranking">
    <div class="ranking_inner">
      <div class="ranking_title">
        排 行 榜
      </div>
      <div class="ranking_more" @click="toRanking">更多 ></div>
      <ul class="ranking_info" >
        <li  v-for="(group,index) in groupItem.toplist" :key="index">
          <div class="info_topName">{{groupItem.groupName}}</div>
          <div class="info_type">{{group.title}}</div>
          <div class="info_playing">
            <div class="icon">
              <span class="iconfont icon-bofang1"></span>
            </div>
          </div>
          <ul class="info_song">
            <li v-for="(item,index) in group.song">
              <div class="info_song_num">{{index+1}}</div>
              <div class="info_song_content">
                <div class="content_name">{{item.title}}</div>
                <div class="content_singer" @click="toSingerDetail(item.singerMid)">{{item.singerName}}</div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "RecommendTopList",
        data(){
          return{
            groupItem:{}
          }
        },
        methods:{
          toRanking(){
            this.$router.replace('ranking')
          },
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
          }
        },
        computed:{
          ...mapState(['recommend']),
        },
        watch:{
          recommend(value){
              this.groupItem=this.recommend.toplist.data.group[0]
          }
        }
    }
</script>

<style scoped lang="less">
  /*ranking排行榜*/
   .ranking{ width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);text-align: center;margin: 0 auto;position:relative;}
   .ranking .ranking_inner{width: 1200px;margin: 0 auto;position: relative}
   .ranking .ranking_title{font-size: 30px;font-weight: bolder;padding-top: 50px;}
   .ranking .ranking_more{position: absolute;right: 0px;top:60px}
   .ranking .ranking_more:hover{color: #31c27c}
   .ranking .ranking_info{padding-bottom: 54px;margin-top: 34px}
   .ranking .ranking_info>li{display: inline-block;height: 500px;width: 220px;margin-right: 20px;background: #008c8c;color: white;text-align: center;}
   .ranking .ranking_info>li:nth-child(1){background: url("./images/homePage_ranking1.jpg") no-repeat 0% 100%;}
   .ranking .ranking_info>li:nth-child(2){background: url("./images/homePage_ranking1.jpg") no-repeat 25% 100%;}
   .ranking .ranking_info>li:nth-child(3){background: url("./images/homePage_ranking1.jpg") no-repeat 50% 100%;}
   .ranking .ranking_info>li:nth-child(4){background: url("./images/homePage_ranking1.jpg") no-repeat 75% 100%;}
   .ranking .ranking_info>li:last-child{display: none; margin-right: 0px;background: url("./images/homePage_ranking1.jpg") no-repeat 100% 100%;}
   .ranking .ranking_info>li .info_topName{font-size: 21px;margin-top: 49px;}
   .ranking .ranking_info>li .info_type{margin: 10px 0px;font-size: 26px;}
   .ranking .ranking_info>li .info_playing {margin: 37px auto;width: 37px;height: 2px;background: white;position: relative;}
   .ranking .ranking_info>li .info_playing .icon{position: absolute;z-index: 1;top:-20px;left:0px;background: white;border-radius: 50%;height:40px;width: 40px;text-align: center;line-height: 40px;opacity: 0;transition: all 0.6s;}
   .ranking .ranking_info>li .info_playing .iconfont{font-size: 25px;color: #545454;margin-right: -4px;margin-top: 3px;display: inline-block;}
   .ranking .ranking_info>li:hover .icon{opacity: 1;transform: scale(1.3);}
   .ranking .ranking_info>li .info_song li{display: flex;flex-direction: row;justify-content: center;margin-bottom: 35px;}
   .ranking .ranking_info>li .info_song li .info_song_num{margin-right: 12px;margin-left: 25px;}
   .ranking .ranking_info>li .info_song li .info_song_content{font-size: 14px;text-align: left;margin-right: 25px;margin-top: 1px;}
   .ranking .ranking_info>li .info_song li .info_song_content .content_name{margin-bottom: 12px;}
   .ranking .ranking_info>li .info_song li .info_song_content .content_name:hover{cursor: pointer}
   .ranking .ranking_info>li .info_song li .info_song_content .content_singer:hover{cursor: pointer}
  .ranking .ranking_info>li .info_song li .info_song_content>div{width: 148px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

</style>
